<template>
  <div id="game-data-content">
    <div>
      <!-- tab标签 -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
          <a href="#football" aria-controls="home" role="tab" data-toggle="tab" ref="red">竞猜足球</a>
        </li>
        <li role="presentation">
          <a href="#basketball" aria-controls="profile" role="tab" data-toggle="tab">竞猜篮球</a>
        </li>
      </ul>

      <!-- 对应内容-->
      <div class="tab-content">
        <!--竞猜篮球-->
        <div role="tabpanel" class="tab-pane active" id="football">

          <div class="table-content">
            <!--表-->
            <table class="table table-hover">
              <!--表头-->
              <thead>
              <tr>
                <th>编号</th>
                <th>赛事</th>
                <th>截止</th>
                <th>主队</th>
                <th></th>
                <th>客队</th>
                <th>数据</th>
                <th>主胜</th>
                <th>平</th>
                <th>客胜</th>
              </tr>
              </thead>
              <!--表身-->
              <tbody>
              <tr v-for="item in betInformation">
                <td>{{item.id}}</td>
                <td ref="addColor" class="setWH" style="padding-bottom: 2px">{{item.competition}}</td>
                <td>{{item.abortData}}</td>
                <td>{{item.mainTeam}}</td>
                <td>{{item.who}}</td>
                <td>{{item.secondTeam}}</td>
                <td class="blue">
                  <a href="">{{item.data[0]}}</a>
                  <a href="">{{item.data[1]}}</a>
                  <a href="">{{item.data[2]}}</a>
                </td>
                <td style="padding-right: 0">
                  <span class="setSpan" @click="changeColor" ref="updateBack">{{item.mainWin}}</span>
                </td>
                <td style="padding-left: 0">
                  <span @click="changeColor" class="setSpan" ref="updateBack">{{item.uqual}}</span>
                </td>
                <td style="padding-left: 0">
                  <span @click="changeColor" class="setSpan" ref="updateBack">{{item.secondWin}}</span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>

          <!--投注按钮-->
          <div class="bet">

            <!--顶部规则-->
            <div class="head">
              <p style="">过关方式： <span style="color: #e23a3a">单关至少选1场，过关请至少选2场比赛</span></p>
            </div>

            <!--底部押注-->
            <div class="foot">

              <div class="left">
                <!--输入框组-->
                <div class="input-group">
                  <span class="input-group-addon" @click="removeRate">-</span>
                  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" v-model="init">
                  <span class="input-group-addon" @click="addRate">+</span>
                </div>

                <!--倍率-->
                <span class="rate" style="position: relative;left: 180px;top:-30px">倍</span>

                <!--总计-->
                <span style="position: relative;left: 200px;top:-30px">
                  共
                  <span style="color: red;">{{rate}}元</span>
                </span>
              </div>

              <!--右侧押注按钮-->
              <div class="right">
                <span style="margin-right: 10px">理论最高奖金 <span style="color: red">{{highBonus}}元</span></span>
                <button class="btn btn-danger btn-lg" style="margin-right: 10px">立即投注</button>
              </div>

            </div>
          </div>

        </div>

        <!--竞猜篮球-->
        <div role="tabpanel" class="tab-pane" id="basketball">
          <table class='table table-hover jincai_lanqiu' ref='jincai_lanqiu'>
            <thead>
               <tr>
                <td v-for='desc in desc'>{{desc}}</td>
               </tr>
            </thead>
            <tbody>
               <tr v-for='con in con'>
              <td>{{con.num}}</td>
              <td><span style='background: rgb(153, 153, 153)'>{{con.game}}</span></td>
              <td>{{con.last}}</td>
              <td>{{con.keTeam}}</td>
              <td>{{con.who}}</td>
              <td>{{con.mainTeam}}</td>
              <td><span style='border:2px solid #e5e5e5'>{{con.keWin}}</span></td>
              <td><span style='border:2px solid #e5e5e5'>{{con.mainWin}}</span></td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "game-data-content",
    data() {
      return {
        betInformation: [
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: [
              "析", "亚", "欧"
            ],
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          },
          {
            id: "周六 002",
            competition: "澳A联",
            abortData: "16:40",
            mainTeam: "阿德莱德",
            who: "vs",
            secondTeam: "珀斯光荣",
            data: "析亚欧",
            mainWin: 1.55,
            uqual: "平",
            secondWin: 4.40
          }
        ],
        updataBack: false,
        init: 10,
        rate: 0,
        highBonus: 0,
        desc: ["编号","赛事", '截止', '客队', "", "主队", "客胜", "主胜"],
        con: [
          {num: "周六302", game: "NBA", last: "00:50", keTeam: "奇才", who: "vs", mainTeam: "热火", keWin: 2.08, mainWin: 1.50},
           {num: "周六303", game: "NBA", last: "00:51", keTeam: "奇才", who: "vs", mainTeam: "灰熊", keWin: 2.08, mainWin: 1.50},
           {num: "周六304", game: "NBA", last: "00:52", keTeam: "奇才", who: "vs", mainTeam: "马刺", keWin: 2.08, mainWin: 1.50},
           {num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},
 {num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50},{num: "周六305", game: "NBA", last: "00:53", keTeam: "奇才", who: "vs", mainTeam: "魔术", keWin: 2.08, mainWin: 1.50}
        ]
      };
    },
    mounted() {
      let colors = ['orange', 'purple', 'green', 'red', "gray", "#454568", "#177", "#678", "#555", "#237", "#611"];
      let allCells = this.$refs.addColor;
      switch (allCells[0]) {
        case allCells[0]:
          allCells[0].style.backgroundColor = colors[0];
        case allCells[1]:
        case allCells[2]:
        case allCells[3]:
          allCells[1].style.backgroundColor = colors[1];
          allCells[2].style.backgroundColor = colors[1];
          allCells[3].style.backgroundColor = colors[1];
        case allCells[4]:
          allCells[4].style.backgroundColor = colors[2];
        case allCells[5]:
          allCells[5].style.backgroundColor = colors[3];
        case allCells[6]:
          allCells[6].style.backgroundColor = colors[4];
        case allCells[7]:
          allCells[7].style.backgroundColor = colors[5];
        case allCells[8]:
          allCells[8].style.backgroundColor = colors[6];
        case allCells[9]:
          allCells[9].style.backgroundColor = colors[7];
        case allCells[10]:
          allCells[10].style.backgroundColor = colors[8];
        case allCells[11]:
          allCells[11].style.backgroundColor = colors[9];
        case allCells[12]:
          allCells[12].style.backgroundColor = colors[10];
        default:
          ;

          $(".jincai_lanqiu tr:even").css("backgroundColor", "red" );

      }

    },
    methods: {
      changeColor() {
        let allspans = this.$refs.updataBack;
        allspans[index].style.backgroundColor = "#e23a3a";
      },
      addRate() {
        this.init += 1;
      },
      removeRate() {
        this.init -= 1;
      }
    }

  }
</script>

<style scoped>

  /*总体样式*/
  #game-data-content {
    width: 850px;
    height: 700px;
    border: 1px solid #ddd;
    float: left;
    margin-left: 10px;
  }

  /*标签里面a链接*/
  #game-data-content ul a {
    font-size: 16px;
    color: #555;
    border-color: white;
  }
  .nav-tabs > li > a {
    margin-right: -1px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
  }

  /*默认激活下划线*/
  #game-data-content ul li.active a{
    border-bottom: 2px solid #e23a3a;
  }

  /*移入时*/
  #game-data-content ul a:hover {
    background: transparent;
    color: cornflowerblue;
    transform: skew(-30deg);
    transition: 1s ease;
  }
  #game-data-content ul li:hover {
    border-color: white;
  }

  /*表头th*/
  .table thead tr th {
    color: #999;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid white;
  }

  /*单元格*/
  td {
    color: #555;
    font-size: 14px;
    text-align: center;
    border-top: 1px solid white;
  }
  .setWH {
    color: #fff;
    font-size: 12px;
  }

  .blue {
    color: #4493eb;
  }

  .setSpan {
    display: inline-block;
    width: 65px;
    height: 25px;
    border: 2px solid #e5e5e5;
  }

  .setSpan:hover {
    cursor: pointer;
    background: #f6f6f6;
  }

  td:focus {
    background: #e23a3a;
  }

  .red {
    background: #e23a3a;
  }

  /*第二个面板动画*/
  #game-data-content #basketball p{
    color: red;
    font-size: 14px;
    animation: changeText 3s infinite;
    text-align: center;
  }
  @keyframes changeText{
    0%{color: orange; font-size: 20px}
    50%{color: blue; font-size: 25px}
    100%{color: green;font-size: 30px}
  }

  /*最后一个字段输入框组*/
  .foot .left .input-group {
    width: 170px;
    height: 47px;
    border: 2px solid #f6f6f6;
  }
  .foot .left .input-group input {
    height: 47px;
  }
  .foot .left .input-group span {
    background: transparent;
  }
  .foot .left .input-group span:hover {
    cursor: pointer;
  }

  /*底部*/
  .foot {
    display: flex;
    justify-content: space-between;
  }
 /* .jincai_lanqiu{
    border-collapse: separate;
    border-spacing: 10px;
  }*/

 /* .jincai_lanqiu td{
     padding: 10px;
    }*/
</style>
